<template>
  <div :class="{'mask':isShow || isScreen}" @click.self="handlerHide">
    <div class="navTab">
      <div
        class="item"
        v-for="(item,index) in navTab"
        @click="handlerClick(index)"
        :class="{'active':currentIndex===index}"
      >
        <span>{{item.name}}</span>
        <i v-if="item.icon" :class="'fa fa-'+item.icon"></i>
      </div>
    </div>
    <!-- 排序 -->
    <div class="filter_extend" v-if="isShow">
      <ul>
        <li
          @click="selectSort(item,index)"
          v-for="(item,index) in sortBy"
          :class="{'sort':index===currentSort}"
          
        >
          <span>{{item.name}}</span>
          <i v-show="index===currentSort" class="fa fa-check"></i>
        </li>
      </ul>
    </div>
    <!-- 筛选 -->
    <div class="filter-extend2" v-if="isScreen">
      <div class="filter-sort">
        <div :key="index" class="morefilter" v-for="(screen, index) in ScreenBy">
          <p class="title">{{ screen.title }}</p>
          <ul>
            <li
              :class="{ 'selected': item.select }"
              :key="i"
              v-for="(item, i) in screen.data"
              @click="selectScreen(item, screen)"
            >
              <img :src="item.icon" alt v-if="item.icon" />
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="morefilter-btn">
        <span :class="{ edit: edit }" @click="clearFilter" class="morefilter-clear">清空</span>
        <span @click="filterOk" class="morefilter-ok">确定</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FillterView",
  props: {
    filterData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      currentIndex: 0,
      currentSort: 0,
      navTab: [],
      sortBy: [],
      ScreenBy: [],
      isShow: false,
      isScreen: false
    };
  },
  created() {
    this.getData();
  },
  computed: {
    edit() {
      let edit = false;
      this.ScreenBy.forEach(screen => {
        screen.data.forEach(item => {
          if (item.select) {
            edit = true;
          }
        });
      });
      return edit;
    }
  },
  methods: {
    handlerClick(index) {
      this.currentIndex = index;
      switch (index) {
        case 0:
          this.isShow = true;
          this.isScreen = false;
          this.$emit("handlerMask", this.isShow);
          break;
        case 1:
          this.update(this.navTab[1].condition);
          break;
        case 2:
          this.update(this.navTab[2].condition);
          break;
        case 3:
          this.isScreen = true;
          this.isShow = false;
          this.$emit("handlerMask", this.isScreen);
          break;
        default:
          this.handlerHide();
          break;
      }
    },
    getData() {
      axios("/api/profile/filter").then(res => {
        this.navTab = res.navTab;
        this.sortBy = res.sortBy;
        this.ScreenBy = res.screenBy;
      });
    },
    handlerHide() {
      this.isShow = false;
      this.isScreen = false;
      this.$emit("handlerMask", false);
    },
    selectSort(item, index) {
      this.currentSort = index;
      this.navTab[0].name = item.name;
      this.handlerHide();
      this.update(item.code);
    },
    update(code) {
     this.$emit('update',code)
    },
    // 多选 单选
    selectScreen(item, screen) {
      if (screen.id !== "MPI") {
        screen.data.forEach(item => {
          item.select = false;
        });
      }
      item.select = !item.select;
    },
    /* 确定 */
    filterOk() {
      let mpiStr=''
      const screenData={
        MPI:'',
        offer:'',
        per:''
      } 
      this.ScreenBy.forEach(screen => {
        screen.data.forEach(item => {
         if(item.select){
           if (screen.id !== "MPI") {
             // 单选
             /* screenData[screen.id]=item.code */
          } else{
            // 多选
            mpiStr+=item.code+','
            screenData[screen.id]=mpiStr
          }
         } 
        });
      });
      this.update(screenData)
      this.handlerHide()
    },
    // 清空
    clearFilter() {
       this.ScreenBy.forEach(screen => {
        screen.data.forEach(item => {
          item.select=false
        });
      });
    }
  }
};
</script>

<style scoped>
.navTab {
  position: relative;
  z-index: 9;
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 13px;
  color: #666;
  background-color: #fff;
  border-bottom: 0.02667rem solid #ddd;
  line-height: 40px;
}
.item {
  flex: 1;
}
i {
  margin-left: 5px;
}
.active {
  font-weight: 600;
  color: #333;
}
.mask {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 55px;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.3s ease-in-out;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
li {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #fff;
}
.sort {
  color: #009eef;
}

/* 筛选 */
.filter-sort {
  line-height: normal;
  padding: 0 2.666667vw;
  background: #ffffff;
}

.morefilter {
  overflow: hidden;
  padding: 10px 0;
}

.morefilter .title {
  font-size: 14px;
  margin-bottom: 2vw;
  color: #666666;
}

.morefilter ul {
  font-size: 14px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.morefilter li {
  box-sizing: border-box;
  width: 30%;
  height: 9.333333vw;
  margin: 0.8vw 1%;
  text-align: center;
  background: #fafafa;
}

.morefilter li img {
  width: 3.466667vw;
  height: 3.466667vw;
  margin-right: 0.8vw;
  vertical-align: middle;
}

.morefilter li span {
  margin-left: 2%;
  vertical-align: middle;
}

.morefilter-btn {
  line-height: 11.466667vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  background-color: #fafafa;
  box-shadow: 0 -0.266667vw 0.533333vw 0 #ededed;
}

.morefilter-btn span {
  font-size: 14px;
  flex: 1;
  text-align: center;
  text-decoration: none;
}

.morefilter-clear {
  color: #dddddd;
  background: #ffffff;
}

.morefilter-ok {
  color: #ffffff;
  border: 0.133333vw solid #00d762;
  background: #00d762;
}

.selected {
  color: #3190e8 !important;
  background-color: #edf5ff !important;
}

.edit {
  color: #333333 !important;
}
</style>